<template>
	<div class="line">
    <vue-echart :options="option" class="charts-line" />
	</div>
</template>

<script>
import 'echarts/lib/chart/line'
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/legend'
import 'echarts/lib/component/grid'
import 'echarts/lib/component/dataZoom'
import ECharts from 'vue-echarts'

export default {
	components: {
		VueEchart: ECharts
	},
	data() {
		return {
			option: {}
		}
	},
	created() {
		this.option = {
			tooltip: {
				trigger: 'axis',
				axisPointer: {
					show: false,
					type: 'shadow'
				}
			},
			legend: {
				show: true,
				icon: 'roundRect',
				data: ['入量', '出量'],
				top: -2,
				left: '8%',
				itemWidth: 30,
				itemHeight: 5,
				textStyle: {
					color: '#fff',
					fontSize: 14
				}
			},
			grid: {
				bottom: -9,
				left: 3,
				right: 5,
				top: 20,
				containLabel: true
			},
			xAxis: {
			  show: false,
				type: 'category',
				data: ['2019-01', '2019-02', '2019-03', '2019-04', '2019-05', '2019-06'],
				axisLine: {
					show: false,
					lineStyle: {
						color: '#ffffff'
					}
				},
				splitLine: {
					show: false
				},
				axisTick: {
					show: true,
					lineStyle: {
						color: '#7478cf'
					}
				}
			},
			dataZoom: [
				{
					type: 'inside'
				}
			],
			yAxis: {
				type: 'value',
				splitNumber: 4,
				splitLine: {
					lineStyle: {
						type: 'dashed',
						color: '#7478cf'
					}
				},
				axisLine: {
					show: false,
					lineStyle: {
						color: '#ffffff'
					}
				},
				axisTick: {
					show: false
				},
				splitArea: {
					show: false
				}
			},
			series: [
				{
					name: '入量',
					type: 'line',
					data: [23, 60, 20, 36, 23, 85],
					symbol: 'circle',
					symbolSize: 4,
					smooth: true,
					lineStyle: {
						width: 2,
						color: '#00C0FF'
					},
					itemStyle: {
						color: '#00C0FF',
						borderWidth: 3,
						borderType: 'solid',
						borderColor: '#00C0FF'
					}
				},
				{
					name: '出量',
					type: 'line',
					data: [65, 6, 29, 36, 57, 21],
					symbol: 'circle',
					symbolSize: 4,
					smooth: true,
					lineStyle: {
						width: 2,
						color: '#FBD437'
					},
					itemStyle: {
						color: '#FBD437',
						borderWidth: 3,
						borderType: 'solid',
						borderColor: '#FBD437'
					}
				}
			]
		}
	},
	methods: {}
}
</script>

<style lang="less" scoped>
.line {
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
	.charts-line {
		width: 100%;
		height: 100%;
	}
}
</style>
